<template>
  <div class="accountMaMnagement-form">
    <el-form :inline="true" :model="inputForm">
      <el-form-item label="账号:">
        <el-input v-model="inputForm.userName" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="员工姓名:">
        <el-input v-model="inputForm.realName" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="角色:">
        <el-select
          v-model="inputForm.roleId"
          style="width: 200px"
          @change="handleChange()"
          clearable
        >
          <el-option
            v-for="item in options"
            :key="item._id"
            :label="item.name"
            :value="item._id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="手机号:">
        <el-input v-model="inputForm.phone" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="帐号状态:">
        <el-select v-model="inputForm.status" clearable style="width: 200px">
          <el-option label="停用" value="500"></el-option>
          <el-option label="正常" value="200"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <div>
      <el-button type="primary" size="small" @click="handleSearch()">查询</el-button>
      <el-button @click="handleReset()">重置</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputForm: {
        userName: "",
        realName: "",
        roleId: "",
        phone: "",
        status: "",
      },
      options: [],
    };
  },
  methods: {
    // 切换角色
    handleChange() {},
    // 查询
    handleSearch() {},
    // 重置
    handleReset() {},
  },
};
</script>

<style scoped lang="scss">
.accountMaMnagement-form {
  display: flex;
  justify-content: space-between;
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>